<template>
  <div class="editor-wrap">
    <div class="editor-group">
      <div class="editor-header">
        <h5>{{ $t("ex.documentInfo") }}</h5>
      </div>
      <div class="editor-content">
        <g-detail ref="detail" :inputConfig="inputConfig" :rules="rules" @pop="setdata" @changeDetail="changeDetail"></g-detail>
      </div>
    </div>
    <div style="overflow:hidden;border-top:1px solid #dddddd">
      <div class="editor-group" style="width:60%;float:left;border-right:1px solid #dddddd">
        <div class="editor-header">
          <h5>{{ $t("ex.adjustInfo") }}</h5>
        </div>
        <div class="editor-content">
          <g-detail ref="detail" :inputConfig="inputConfig1" :rules="rules" @changeDetail="changeDetail"></g-detail>
        </div>
      </div>
      <div class="editor-group" style="overflow:hidden">
        <div class="editor-header">
          <el-button style="float:right" type="text" @click="handleAddSerial">{{ $t('ex.serialAdd') }}</el-button>
          <h5>{{ $t("ex.serialInfo") }} </h5>
        </div>
        <div class="editor-content">
          <el-table stripe border :data="serialList" max-height="280">
            <el-table-column type="index" :label="$t('app.index')" width="55"></el-table-column>
            <el-table-column prop="serialNo" :label="$t('config.serialNo')">
              <template slot-scope="{row}">
                <el-input v-model="row.serialNo" @input="change(row)"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="total" :label="$t('wave.totaleaches')" width="55"></el-table-column>
            <el-table-column prop="type" :label="$t('common.type')" width="80">
              <template slot-scope="{row}">
                <span v-if="row.type ==1">{{ $t('ex.serial1') }}</span>
                <span v-else-if="row.type ==2">{{ $t('ex.serial2') }}</span>
                <span v-else-if="row.type ==3">{{ $t('ex.serial3') }}</span>
                <span v-else-if="row.type ==4">{{ $t('ex.serial4') }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('transmit.action')" width="80">
              <template slot-scope="{row,$index}">
                <el-button type="text" v-if="row.type == 1" @click="remove1(row)">{{ $t('ex.remove') }}</el-button>
                <el-button type="text" v-else-if="row.type == 2" @click="remove2($index)">{{ $t('ex.remove') }}</el-button>
                <el-button type="text" v-else-if="row.type == 3" @click="revocation(row)">{{ $t('ex.revocation') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import baseMixin from "@/mixins/BaseMixin";
export default {
  name: "adjustmentEditor",
  mixins: [baseMixin],
  props: {
    id: {
      type: Number,
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      serialList:[],

    };
  },
  methods: {
    change(row){
      this.serialList.find(item => item.serialNo == row.serialNo).type = 4
    },
    remove1(row){
      this.serialList.find(item => item.serialNo == row.serialNo).type = 3
    },
    remove2(index){
      this.serialList.splice(index,1)
    },
    revocation(row){
      this.serialList.find(item => item.serialNo == row.serialNo).type = 1
    },
    handleAddSerial(){
      this.serialList.push({serialNo:"",total:1,type:2})
    },
    
  },
  watch: {
    data: {
      handler(data) {
        if (data) {
          this.getSerialInfo();
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.editor-wrap {
  border: 1px solid #dddddd;

  .editor-header {
    padding: 5px;
    background: #eff3f7;
    border-bottom: 1px solid #dddddd;
  }

  h4 {
    position: relative;
    padding-left: 1em;

    &::before {
      content: "";
      position: absolute;
      width: 4px;
      height: 1em;
      left: 0;
      background: #409eff;
    }
  }

  .editor-content {
    padding: 10px;
  }
}
</style>
